<template>
	<div class="a-con" :id="id" v-if="state.visible" :style="{ background: backgroundColor }">
		<div :style="state.styleObject" class="test-class">package</div>
		<div class="test-class2">本地组件</div>
		<el-form wrap>
			<el-form-item>
				<!--			<img class="base-class" :src="state.image" />-->
				图片测试
			</el-form-item>
			<el-form-item>
				<div>
					updateConfig测试1, config: configuration.series.child1.number{{
						props.configuration?.series.child1.number
					}}
				</div>
			</el-form-item>
			<el-form-item>标题title配置的值： {{ props.configuration?.title }}</el-form-item>
			<el-form-item>position： {{ props.configuration.position }}</el-form-item>
			<el-form-item>回调池中k的值： {{ props.callbackValues.k || 0 }}</el-form-item>
			<el-form-item>组件回调池： {{ cbpool }}</el-form-item>
			<el-form-item>回测配置测试的值： {{ props.configuration?.callbacktest }}</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onClickTestRelative">触发回调</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onClickEmit">触发事件测试</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onClickUpdateConfig">updateConfig测试1：配置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onClickUpdatePosition">updateConfig测试2：位置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onClickUpdateData">updateConfig测试3：数据</el-button>
			</el-form-item>
			<el-form-item>
				<el-select v-model="selectVal" placeholder="Select" size="large" style="width: 240px">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-checkbox v-model="checked" label="Option 1" size="large" />
			</el-form-item>
			<el-form-item>
				<el-row>
					<!-- <el-col :span="18"><el-input v-model="state.themeColor"></el-input></el-col> -->
					<el-col :span="6"><el-color-picker v-model="state.themeColor" /></el-col>
					<el-col :span="6">
						<el-button type="primary" @click="onChangeThemeColorClick">修改主题色</el-button>
					</el-col>
				</el-row>
			</el-form-item>
		</el-form>

		<!-- <div>updateConfig测试3, data[0].newField: {{ props.data[0].newField }}</div> -->
	</div>
</template>

<script lang="ts">
export default {
	name: 'testCom3'
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, toRefs, computed, inject, ref } from 'vue';
import * as theme from '@CIF/Runtime/Global/theme';
import _ from 'lodash';

const renderer: any = inject('renderer');
const props: any = defineProps({
	id: String, // 平台运行时，每个组件实例都会被自动分配一个组件id，id每次都不相同
	base: Object,
	configuration: Object,
	data: Array,
	childrenConfig: Array,
	childrenData: Array,
	callbackValues: Object, // 回调池里的值
	callbackArgs: Array, // 回调参数
	edit: Boolean,
	actions: Array,
	events: Array,
	width: Number,
	height: Number,
	top: Number,
	left: Number,
	onRelative: Function, // (id: String, data: Any): void
	emit: Function, // (eventName: String, data: Any, componentId?: Number): void
	updateConfig: Function, // ({id？, type, payload})
	theme: Object, // 主题对象
	RR: Function // TODO： 凤翎发请求用的request工具，临时提供，待api数据源设计实现完后移除
});
const actions = props.actions;
const state = reactive({
	async: false,
	loader: null,
	name: null,

	// CifComponents: [],

	activeEngine: null,

	styleObject: {
		color: 'red',
		fontSize: '13px',
		backGround: 'url(./assets/ll.jpg)'
	},
	// image: dl,
	isCpntInit: false,
	visible: !props.configuration?.hideDefault,
	themeColor: '#BA3FAA'
});
const selectVal = ref('');
const options = [
	{
		value: 'Option1',
		label: 'Option1'
	},
	{
		value: 'Option2',
		label: 'Option2'
	}
];
const checked = ref('');
const cbpool = computed(() => {
	return JSON.stringify(props.callbackValues);
});
const backgroundColor = computed(() => {
	// return Color(document.documentElement.style.getPropertyValue("--theme-color") || "#06CEAE").alpha(0.35)
	// const bg = this.$gTheme.primary;
	// bg.alpha = this.$gTheme.hideAlpha;
	// return bg;
	return '#06CEAE';
});
const btnColor = computed(() => {
	// return this.$gTheme.btnColor;
	return '#6a9955';
});

function onClickTestRelative() {
	props.onRelative(props.id, {
		K1: new Date()
	});
	props.onRelative(props.id, {
		KKK: '不可能'
	});
	const callbacks = props.callbackArgs; // 1
	if (callbacks.length) {
		const callbackData = {};
		for (const { target, origin } of callbacks) {
			console.log(`${target}: ${origin}`);
			const item = props.data[0]; // data为组件数据对象
			if (origin in item) {
				// 2a
				callbackData[target] = item[origin]; // 3
			}
		}
		props.onRelative(props.id, callbackData);
	}
	// setTimeout(() => {
	//   this.onRelative(this.id, {
	//     K1: "回调调试结束",
	//   })
	// }, 10000)
}

function onClickEmit() {
	props.emit('testEvent', props.data);
}
function testAction(event: any) {
	console.log('测试响应', event, 'renderer', renderer);
	renderer.state.engine.exposed.getReadiedVGEViewer().then((viewer: any) => {
		console.log('viewer', viewer);
	});
}
function showComponent() {
	state.visible = true;
	console.log('democpnt 示例组件显示');
}
function hideComponent() {
	state.visible = false;
	console.log('democpnt 示例组件隐藏');
}

function onClickUpdateConfig() {
	console.log('onClickUpdateConfig 更新配置', Date.now());
	props.updateConfig({
		id: props.id,
		type: 'config',
		payload: {
			// path: "series.child1.number", // 两种path格式都可
			path: ['series', 'child1', 'number'],
			value: props.configuration.series.child1.number - 1
		}
	});
}
function onClickUpdatePosition() {
	console.log('onClickUpdatePosition 更新配置', Date.now());
	props.updateConfig({
		id: props.id,
		type: 'position',
		payload: {
			top: props.top + 10,
			left: props.left + 10
		}
	});
}
function onClickUpdateData() {
	console.log('onClickUpdateData 更新配置', Date.now());
	const tmpData = _.clone(props.data);
	tmpData[0].newField = tmpData[0].newField ? tmpData[0].newField + 1 : 1;
	this.updateConfig({
		id: props.id,
		type: 'data',
		payload: [...props.data]
	});
}

function onChangeThemeColorClick() {
	theme.setGTheme(state.themeColor);
	const el = document.documentElement;
	// const body = document.querySelector('body');
	el.style.setProperty('--el-color-primary', state.themeColor);
	// body.style.setProperty('--van-primary-color', state.themeColor);
}

onMounted(() => {});

defineExpose({ ...toRefs(state), actions, testAction, showComponent, hideComponent });
</script>

<style lang="scss" scoped>
.a-con {
	/* width: 250px;
  height: 80px; */ // 组件内部顶级DOM如果设置宽高的话配置器里的位置大小将被覆盖
	line-height: 20px;
	/* background: rgba(18, 18, 18, 0.35); */
	background: rgba(200, 224, 228, 0.7) !important;
	color: #121313;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	:deep(.el-form-item) {
		margin-bottom: 5px;
	}
	.base-class {
		display: inline-block;
		width: 60px;
		height: 60px;
	}

	.test-class {
		/* background: url(./assets/ultra.png); */
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.test-class2 {
		/* background: url(./assets/doshow-light.svg); */
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
}
</style>
